<template>
  <view class="login-container">
    <!-- 顶部装饰图 -->
    <view class="login-header">
      <image class="header-image" src="/static/images/login-header.png" mode="aspectFill"></image>
    </view>
    
    <!-- 标题 -->
    <view class="login-title">
      <text class="title-text">AI风格重绘</text>
      <text class="subtitle-text">让艺术创作变得简单</text>
    </view>
    
    <!-- 表单区域 -->
    <view class="login-form">
      <!-- 切换登录/注册 -->
      <view class="form-tabs">
        <navigator 
          class="tab-item" 
          :class="{'active': activeTab === 'login'}" 
          @tap="activeTab = 'login'"
          hover-class="none"
        >登录</navigator>
        <navigator 
          class="tab-item" 
          :class="{'active': activeTab === 'register'}" 
          @tap="activeTab = 'register'"
          hover-class="none"
        >注册</navigator>
      </view>
      
      <!-- 登录表单 -->
      <view v-if="activeTab === 'login'" class="form-content animate-fade-in">
        <view class="form-item">
          <text class="form-label">用户名</text>
          <input 
            class="form-input" 
            type="text" 
            v-model="loginForm.username" 
            placeholder="请输入用户名"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">密码</text>
          <input 
            class="form-input" 
            type="password" 
            v-model="loginForm.password" 
            placeholder="请输入密码"
          />
        </view>
        
        <view class="form-actions">
          <view class="remember-pwd">
            <checkbox 
              :checked="rememberPassword" 
              @click="rememberPassword = !rememberPassword"
              color="#FF69B4"
            ></checkbox>
            <text class="remember-text">记住密码</text>
          </view>
          <text class="forgot-pwd" @click="forgotPassword">忘记密码?</text>
        </view>
        
        <button 
          class="btn btn-primary btn-block login-btn" 
          :disabled="loginLoading"
          @click="handleLogin"
        >
          <text v-if="loginLoading">登录中...</text>
          <text v-else>登录</text>
        </button>
      </view>
      
      <!-- 注册表单 -->
      <view v-if="activeTab === 'register'" class="form-content animate-fade-in">
        <view class="form-item">
          <text class="form-label">用户名</text>
          <input 
            class="form-input" 
            type="text" 
            v-model="registerForm.username" 
            placeholder="请输入用户名"
          />
          <text v-if="registerErrors.username" class="form-error">{{registerErrors.username}}</text>
        </view>
        
        <view class="form-item">
          <text class="form-label">昵称</text>
          <input 
            class="form-input" 
            type="text" 
            v-model="registerForm.nickname" 
            placeholder="请输入昵称"
          />
          <text v-if="registerErrors.nickname" class="form-error">{{registerErrors.nickname}}</text>
        </view>
        
        <view class="form-item">
          <text class="form-label">密码</text>
          <input 
            class="form-input" 
            type="password" 
            v-model="registerForm.password" 
            placeholder="请输入密码"
          />
          <text v-if="registerErrors.password" class="form-error">{{registerErrors.password}}</text>
        </view>
        
        <view class="form-item">
          <text class="form-label">确认密码</text>
          <input 
            class="form-input" 
            type="password" 
            v-model="registerForm.confirmPassword" 
            placeholder="请再次输入密码"
          />
          <text v-if="registerErrors.confirmPassword" class="form-error">{{registerErrors.confirmPassword}}</text>
        </view>
        
        <button 
          class="btn btn-primary btn-block login-btn" 
          :disabled="registerLoading"
          @click="handleRegister"
        >
          <text v-if="registerLoading">注册中...</text>
          <text v-else>注册</text>
        </button>
      </view>
    </view>
    
    <!-- 其他登录方式 -->
    <view class="other-login">
      <view class="divider-text">
        <text class="divider-text-content">其他登录方式</text>
      </view>
      
      <view class="other-login-icons">
        <view class="login-icon" @click="thirdPartyLogin('wechat')">
          <image src="/static/images/wechat-icon.png" mode="aspectFit"></image>
        </view>
        <view class="login-icon" @click="thirdPartyLogin('qq')">
          <image src="/static/images/qq-icon.png" mode="aspectFit"></image>
        </view>
        <view class="login-icon" @click="thirdPartyLogin('weibo')">
          <image src="/static/images/weibo-icon.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>
    
    <!-- 游客模式 -->
    <view class="guest-mode">
      <text class="guest-text" @click="guestLogin">游客模式</text>
    </view>
  </view>
</template>

<script>
import store from '@/store/index.js';
import { userApi } from '@/utils/api.js';

export default {
  data() {
    return {
      // 当前激活的标签页
      activeTab: 'login',
      
      // 登录表单
      loginForm: {
        username: '',
        password: ''
      },
      
      // 注册表单
      registerForm: {
        username: '',
        nickname: '',
        password: '',
        confirmPassword: ''
      },
      
      // 注册表单错误信息
      registerErrors: {
        username: '',
        nickname: '',
        password: '',
        confirmPassword: ''
      },
      
      // 记住密码
      rememberPassword: false,
      
      // 加载状态
      loginLoading: false,
      registerLoading: false
    };
  },
  
  onLoad() {
    // 检查是否有记住的用户名和密码
    this.checkSavedCredentials();
  },
  
  methods: {
    /**
     * 检查是否有保存的登录凭证
     */
    checkSavedCredentials() {
      const savedUsername = uni.getStorageSync('savedUsername');
      const savedPassword = uni.getStorageSync('savedPassword');
      
      if (savedUsername && savedPassword) {
        this.loginForm.username = savedUsername;
        this.loginForm.password = savedPassword;
        this.rememberPassword = true;
      }
    },
    
    /**
     * 保存登录凭证
     */
    saveCredentials() {
      if (this.rememberPassword) {
        uni.setStorageSync('savedUsername', this.loginForm.username);
        uni.setStorageSync('savedPassword', this.loginForm.password);
      } else {
        uni.removeStorageSync('savedUsername');
        uni.removeStorageSync('savedPassword');
      }
    },
    
    /**
     * 验证登录表单
     * @returns {boolean} 表单是否有效
     */
    validateLoginForm() {
      if (!this.loginForm.username) {
        uni.showToast({
          title: '请输入用户名',
          icon: 'none'
        });
        return false;
      }
      
      if (!this.loginForm.password) {
        uni.showToast({
          title: '请输入密码',
          icon: 'none'
        });
        return false;
      }
      
      return true;
    },
    
    /**
     * 验证注册表单
     * @returns {boolean} 表单是否有效
     */
    validateRegisterForm() {
      let isValid = true;
      
      // 重置错误信息
      this.registerErrors = {
        username: '',
        nickname: '',
        password: '',
        confirmPassword: ''
      };
      
      // 验证用户名
      if (!this.registerForm.username) {
        this.registerErrors.username = '请输入用户名';
        isValid = false;
      } else if (this.registerForm.username.length < 4) {
        this.registerErrors.username = '用户名至少需要4个字符';
        isValid = false;
      }
      
      // 验证昵称
      if (!this.registerForm.nickname) {
        this.registerErrors.nickname = '请输入昵称';
        isValid = false;
      }
      
      // 验证密码
      if (!this.registerForm.password) {
        this.registerErrors.password = '请输入密码';
        isValid = false;
      } else if (this.registerForm.password.length < 6) {
        this.registerErrors.password = '密码至少需要6个字符';
        isValid = false;
      }
      
      // 验证确认密码
      if (!this.registerForm.confirmPassword) {
        this.registerErrors.confirmPassword = '请确认密码';
        isValid = false;
      } else if (this.registerForm.confirmPassword !== this.registerForm.password) {
        this.registerErrors.confirmPassword = '两次输入的密码不一致';
        isValid = false;
      }
      
      return isValid;
    },
    
    /**
     * 处理登录
     */
    async handleLogin() {
      if (!this.validateLoginForm()) {
        return;
      }
      
      this.loginLoading = true;
      
      try {
        // 调用登录接口
        await store.login({
          username: this.loginForm.username,
          password: this.loginForm.password
        });
        
        // 保存登录凭证
        this.saveCredentials();
        
        // 显示登录成功提示
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
        
        // 跳转到首页
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          });
        }, 1500);
      } catch (error) {
        console.error('登录失败', error);
        uni.showToast({
          title: error.message || '登录失败，请重试',
          icon: 'none'
        });
      } finally {
        this.loginLoading = false;
      }
    },
    
    /**
     * 处理注册
     */
    async handleRegister() {
      if (!this.validateRegisterForm()) {
        return;
      }
      
      this.registerLoading = true;
      
      try {
        // 调用注册接口
        await userApi.register({
          username: this.registerForm.username,
          password: this.registerForm.password,
          nickname: this.registerForm.nickname
        });
        
        // 显示注册成功提示
        uni.showToast({
          title: '注册成功，请登录',
          icon: 'success'
        });
        
        // 切换到登录标签页
        this.activeTab = 'login';
        
        // 填充登录表单
        this.loginForm.username = this.registerForm.username;
        this.loginForm.password = this.registerForm.password;
        
        // 重置注册表单
        this.registerForm = {
          username: '',
          nickname: '',
          password: '',
          confirmPassword: ''
        };
      } catch (error) {
        console.error('注册失败', error);
        uni.showToast({
          title: error.message || '注册失败，请重试',
          icon: 'none'
        });
      } finally {
        this.registerLoading = false;
      }
    },
    
    /**
     * 忘记密码
     */
    forgotPassword() {
      uni.showToast({
        title: '忘记密码功能开发中',
        icon: 'none'
      });
    },
    
    /**
     * 第三方登录
     * @param {string} type - 登录类型
     */
    thirdPartyLogin(type) {
      uni.showToast({
        title: `${type}登录功能开发中`,
        icon: 'none'
      });
    },
    
    /**
     * 游客模式登录
     */
    guestLogin() {
      // 显示提示
      uni.showToast({
        title: '以游客身份进入',
        icon: 'success'
      });
      
      // 跳转到首页
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }, 1500);
    }
  }
};
</script>

<style lang="scss">
@import '@/static/styles/global.scss';

.login-container {
  min-height: 100vh;
  background-color: $background-color;
  display: flex;
  flex-direction: column;
  padding-bottom: 40rpx;
}

.login-header {
  width: 100%;
  height: 400rpx;
  position: relative;
  overflow: hidden;
  
  .header-image {
    width: 100%;
    height: 100%;
  }
}

.login-title {
  padding: 40rpx;
  text-align: center;
  
  .title-text {
    font-size: 48rpx;
    font-weight: bold;
    color: $primary-color;
    display: block;
    margin-bottom: 20rpx;
  }
  
  .subtitle-text {
    font-size: 28rpx;
    color: $text-color-secondary;
  }
}

.login-form {
  margin: 0 40rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  box-shadow: $box-shadow;
  overflow: hidden;
  
  .form-tabs {
    display: flex;
    border-bottom: 1rpx solid $border-color;
    
    .tab-item {
      flex: 1;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 32rpx;
      color: $text-color-secondary;
      position: relative;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      
      &.active {
        color: $primary-color;
        font-weight: bold;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 30%;
          width: 40%;
          height: 6rpx;
          background-color: $primary-color;
          border-radius: 3rpx;
        }
      }
    }
  }
  
  .form-content {
    padding: 40rpx;
  }
  
  .form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    
    .remember-pwd {
      display: flex;
      align-items: center;
      
      .remember-text {
        font-size: 24rpx;
        color: $text-color-secondary;
        margin-left: 10rpx;
      }
    }
    
    .forgot-pwd {
      font-size: 24rpx;
      color: $primary-color;
    }
  }
  
  .login-btn {
    height: 90rpx;
    line-height: 50rpx;
    font-size: 32rpx;
    margin-top: 50rpx;
  }
}

.other-login {
  margin: 60rpx 40rpx 0;
  
  .other-login-icons {
    display: flex;
    justify-content: center;
    margin-top: 40rpx;
    
    .login-icon {
      width: 100rpx;
      height: 100rpx;
      margin: 0 30rpx;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.guest-mode {
  text-align: center;
  margin-top: 60rpx;
  
  .guest-text {
    font-size: 28rpx;
    color: $text-color-secondary;
    text-decoration: underline;
  }
}
</style>
